import 'package:flutter/material.dart';

class GridView2 extends StatelessWidget {
  const GridView2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // 1. 导航条
        appBar: AppBar(
          title: const Text(
            '宫格布局-方式2',
            style: TextStyle(color: Colors.white),
          ),
          backgroundColor: Colors.pink,
          centerTitle: true,
        ),
        // 2. 主体部分
        body: GridView.builder(
            // 2.1 固定侧轴数量的
            // gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            //     // 设置侧轴上的盒子数量
            //     crossAxisCount: 3,
            //     // 设置主轴上的间距
            //     mainAxisSpacing: 10,
            //     // 设置侧轴上的间距
            //     crossAxisSpacing: 15,
            //     // 设置宽高比
            //     childAspectRatio: 1),

            // 2.1 固定侧轴盒子的
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 150,
              // 设置主轴上的间距
              mainAxisSpacing: 10,
              // 设置侧轴上的间距
              crossAxisSpacing: 15,
              // 设置宽高比
              childAspectRatio: 1),

            itemBuilder: (BuildContext context, int index) {
              return Container(
                color: Colors.cyan,
                alignment: Alignment.center,
                child: const Text('商品列表'),
              );
            },
             itemCount: 50
            ),
            
           );
  }
}
